import React, {useState, useEffect} from 'react'
import {Table, Button,Modal, message,notification ,Image} from 'antd'
import axios from 'axios' 
import {
  DeleteOutlined,
  ExclamationCircleOutlined
} from '@ant-design/icons';
import { alert } from 'antd-mobile/es/components/dialog/alert';

const {confirm} = Modal
export default function QuestionList() {

    const [dataSource, setdataSource] = useState([])
    useEffect(()=>{
        axios.get("/api/question").then(res=>{
          const list = res.data.result
          setdataSource(list)
        })
      },[]) 

    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render:(id)=>{
                return <b>{id}</b>
            }
        },
        {
            title: '题目类型',
            dataIndex: 'question_type',
            key: 'question_type',
        },
        {
            title: '题干图片',
            dataIndex: 'question_title',
            key: 'question_title',
            render:(question_title)=>{
              return(
                  <Image style={{width:"80px",height:"50px"}} src={question_title}/>
              ) 
            }
        },
        {
            title: '正确答案',
            dataIndex: 'true_answer',
            key: 'true_answer',
        },
        {
            title: '答案A',
            dataIndex: 'answer_a',
            key: 'answer_a',
        },
        {
            title: '答案B',
            dataIndex: 'answer_b',
            key: 'answer_b',
        },
        {
            title: '答案C',
            dataIndex: 'answer_c',
            key: 'answer_c',
        },
        {
            title: '答案D',
            dataIndex: 'answer_d',
            key: 'answer_d',
        },
        {
            title: '答案解析',
            dataIndex: 'answer_key',
            key: 'answer_key',
            render:(answer_key)=>{
              return(
                  <Image style={{width:"80px",height:"50px"}} src={answer_key}/>
              ) 
            }
        },
        {
          title: '操作',
          render:(item)=>{
            return <div>
              <Button danger shape="circle" 
                icon={<DeleteOutlined />}  
                style={{marginRight:"10px"}}
                onClick={()=>confirmMethod(item)}
              />
            </div>
          }
        },
    ]
    //弹框确认是否删除
    const confirmMethod=(item)=>{
        Modal.confirm({
            title: '您确定要删除吗?',
            icon: <ExclamationCircleOutlined />,
            onOk() {
                console.log('OK');
                deleMethod(item);
                notification.info({
                message:'通知',
                description:
                    '删除成功',
                placement:"bottomRight",
                });
            },
            onCancel() {
                console.log('Cancel');
            },
        });
    }
    //删除方法
    const deleMethod =(item)=>{
        // 当前页面同步状态
        setdataSource(dataSource.filter(data=>data.id !== item.id))
        console.log(item.id)
        const id = item.id
        //要前后端同步
        axios.post('/api/question/delete_question',{id:id})
      }
    return (
        <div>
            <Table dataSource={dataSource} columns={columns}
              pagination={{
                pageSize:10}} 
              rowKey={item=>item.id}
            />
        </div>
    )
}